<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet"  th:href="@{/static/backstage/css/layui.css}">
    <style>
        table{
            border-collapse: collapse;
        }
        table th,td{
            font-size: 14px;
            border-width: 1px;
            border-style: solid;
            border-color: #e6e6e6;
            min-height: 20px;
            text-align: center;
        }
        table th{
            padding: 9px 15px;
        }
        table td{
            padding: 9px 15px;
            width: 60px;

        }
    </style>
</head>
<body>
<div id="table_content" class="table_content" style="width: 100%;background-color: #fff;margin: 0 auto;">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>留言管理</legend>
    </fieldset>
    <div style="height: 50px;">
        <a href="javascript:void(0);" id="refreshBtn"
           style="color: #fff;background-color: #009688;text-decoration: none;padding: 5px 10px 5px 10px;border-radius: 2px;font-size: 16px;">刷新</a>
    </div>
    <table>
        <tr style="background-color: #f2f2f2;font-weight: bold;">
            <td style="width: 250px;">博文ID</td>
            <td style="width: 350px;">博文标题</td>
            <td style="width: 150px;">评论数量</td>
            <td style="width: 200px;">操作</td>
        </tr>
        <!--循环遍历开始-->
        <tr th:each="manageComm:${commentArticleVO.pageList}">
            <td style="padding: 7px 15px;">
                <a target="_blank" th:href="'/single/'+${manageComm.articleId}" th:text="${manageComm.articleId}"></a>
            </td>
            <td style="padding: 7px 15px;">
                <a th:href="'/single/'+${manageComm.articleId}" target="_blank" th:title="${manageComm.articleTitle}">
                    <p style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;" th:text="${manageComm.articleTitle}"></p>
                </a>
            </td>
            <td style="padding: 7px 15px;" th:text="${manageComm.articleCommentCount}"></td>
            <td style="padding: 7px 15px;">
                <div style="float: left;padding: 7px 12px;">
                    <a th:href="'/backstage/commentList/1/'+${manageComm.articleId}" style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;">查看详情</a>
                </div>
                <div style="float: left;padding: 7px 12px;">
                    <a href="javascript:void(0);" style="color: #fff;background-color: #009688;font-size: 14px;padding: 5px 10px 5px 10px;text-decoration: none;border-radius: 2px;" onclick="deleteAllCommentById(this)" th:type="${manageComm.articleId}">全部删除</a>
                </div>
            </td>
        </tr>
        <!--循环END-->
    </table>
    <!--分页导航-->
    <div style="width: 50%;height: 60px;margin: auto;font-size: 15px">
        <a id="preBtn" name="pre" href="javascript:void(0);" style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;" title="上一页" type=""> 上一页 </a>
        <a id="nextBtn" name="next" href="javascript:void(0);" style="background-color: #009688;padding: 5px 5px 5px 6px;color: #fff;border-radius: 2px;margin: 0px 10px 0px 10px;line-height: 60px;font-size: 14px;" title="下一页"> 下一页 </a>
        &nbsp;跳转至 &nbsp;<input autocomplete="off" id="pageJumpInput" type="text" oninput="value=value.replace(/[^\d]/g,'')" style="width: 25px;border: 1px solid #e6e6e6;border-radius: 2px;padding: 5px 5px;" maxlength="3">&nbsp; 页 &nbsp;<input type="button" value="确 认" id="pageJumpBtn" style="font-size: 14px;padding: 4px 5px 4px 6px;border-radius: 2px;background-color: #009688;color: #fff;border: none;">
        &emsp;当前第 [[${commentArticleVO.current}]] 页，共 [[${commentArticleVO.total}]] 页
    </div>
</div>
</body>
<script th:src="@{/static/backstage/js/jquery-2.1.1.js}"></script>
<script th:src="@{/static/backstage/js/layui.js}"></script>
<script th:inline="javascript">
    //上一页按钮
    $("#preBtn").click(function (){
        var current = [[${commentArticleVO.current}]];
        var total = [[${commentArticleVO.total}]];
        if (current == 1){
            layer.msg('没有上一页了！');
        }else if (current>1){
            layer.load(1, {time: 0.3*1000});
            $.ajax({
                url : "/backstage/commentManage/"+(Number(current)-Number(1)),
                success:function (html){
                    setTimeout(function () {
                        $("#table_content").html(html);
                    },100)
                }
            });
        }else if (current > total){
            layer.msg('页码错误！', { icon: 2 });
        }
    });
    //下一页按钮
    $("#nextBtn").click(function () {
        var current = [[${commentArticleVO.current}]];
        var total = [[${commentArticleVO.total}]];
        if (current<total && current>0){
            layer.load(1, {time: 0.3*1000});
            $.ajax({
                url : "/backstage/commentManage/"+(Number(current)+Number(1)),
                success:function (html){
                    setTimeout(function () {
                        $("#table_content").html(html);
                    },100)
                }
            });
        }else if (current == total){
            layer.msg('没有下一页了！');
        }else {
            layer.msg('没有下一页了！');
        }
    });
    //跳转按钮
    $("#pageJumpBtn").click(function (){
        //获取当前页码
        var current = [[${commentArticleVO.current}]];
        //获取总页码
        var total = [[${commentArticleVO.total}]];
        //获取input中的输入值
        var jumpPage = $("#pageJumpInput").val();
        if (jumpPage>=1&&jumpPage<=total&&jumpPage!=current){
            $.ajax({
                url : "/backstage/commentManage/"+(jumpPage),
                success:function (html){
                    $("#table_content").html(html);
                    setTimeout(function () {
                        layer.msg('已为您跳转至第 '+jumpPage+' 页！');
                    },300)
                }
            });
        }else if (jumpPage == current){
            layer.msg('当前为第 '+current+' 页，无须跳转！');
        }else {
            layer.msg('页码输入有误，请重新输入！', { icon: 2 });
        }
    });
    //刷新按钮
    $("#refreshBtn").click(function () {
        layer.load(1, {time: 0.4*1000});
        $.ajax({
            url:"/backstage/commentManage/1",
            success:function (html){
                $("#table_content").html(html);
                setTimeout(function () {
                    layer.msg('已为您刷新');
                },200)
            }
        });
    });
    //删除操作
    function deleteAllCommentById(data){
        var deleteId = data.type;
        layer.confirm('确认删除该博文的全部留言和回复吗？', {
            btn: ['确认','取消'] //按钮
        }, function(){
            $.get(
                "/backstage/deleteAllCommentByArticleId/"+deleteId,
                function (re){
                    if (re == true){
                        layer.msg('删除成功！', {icon: 1});
                    }else{
                        layer.msg('删除失败！', {icon: 2});
                    }
                    refresh();
                });
        }, function(){});
    }
    //刷新当前页面
    function refresh(){
        var current = [[${commentArticleVO.current}]];;
        $.ajax({
            url:"/backstage/commentManage/"+current,
            success:function (html){
                layer.load(1, {time: 0.1*1000});
                setTimeout(function () {
                    $("#table_content").html(html);
                },100)
            }
        });
    };
</script>
</html>